<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag" :class="{ show: showHeader }">
			<image src="/static/icon-Get-into@3.png" class="back-btn" @click="goBack" />
			<view class="header-title">
				<text>团购商品详情</text>
			</view>
			<view class="share-btn" @click="showShareModal">
				<image src="/static/o2o/fx@2x.png" />
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-section">
			<view class="back-btn-float" @click="goBack">
				<image src="/static/fanhui@2x (2).png" />
			</view>
			<view class="share-btn-float" @click="showShareModal">
				<image src="/static/fenxiang@2x.png" />
			</view>
			
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 商家信息 -->
		<view class="merchant-info" v-if="goodsInfo.merch_info">
			<view class="merchant-title">{{ goodsInfo.merch_info.name }}</view>
			<view class="goods-intro">{{ goodsInfo.intro }}</view>
		</view>

		<!-- 价格信息 -->
		<view class="price-section" v-if="goodsInfo.id">
			<view class="price-left">
				<view class="current-price">
					¥ <text class="price-num">{{ goodsInfo.price }}</text>
					<text class="market-price">¥ {{ goodsInfo.market_price }}</text>
				</view>
				<view class="hand-price">到手价 ¥ {{ goodsInfo.hand_price }}</view>
			</view>
			<view class="buy-btn" @click="buyNow">立即购买</view>
		</view>

		<!-- 会员分润信息 -->
		<view class="member-profit" v-if="profitInfo">
			<text>会 员：消费可分润 ¥ {{ profitInfo.one_member_rate_price }}</text>
			<text>会 员：累计消费额满{{ profitInfo.consume_threshold }} 可分润 ¥ {{ profitInfo.two_member_rate_price }}</text>
			<text>会 员：累计分润额满{{ profitInfo.rebate_threshold }} 可分润 ¥ {{ profitInfo.member_add_rate_price }}</text>
			<text>合伙人：消费可分润 ¥ {{ profitInfo.consume_partner_rate_price }}</text>
			<text>邀请其他人消费购买此商品可分润 ¥ {{ profitInfo.other_rate_price }}</text>
		</view>

		<!-- 售出信息 -->
		<view class="sold-info" v-if="goodsInfo.sold_num">
			<view class="info-item">
				<image src="/static/o2o/icon-yxxk.png" />
				<text>随时退</text>
			</view>
			<view class="info-item">
				<image src="/static/o2o/icon-yxxk.png" />
				<text>到期自动退</text>
			</view>
			<view class="sold-count">
				<image src="/static/o2o/yishou@2x.png" />
				<text>已售{{ goodsInfo.sold_num }}</text>
			</view>
		</view>

		<!-- 适用商户 -->
		<view class="merchant-address" v-if="goodsInfo.merch_info">
			<view class="section-title">适用商户</view>
			<view class="address-info">
				<view class="address-text">
					<text class="address">{{ goodsInfo.merch_info.address }}</text>
					<text class="phone">{{ goodsInfo.merch_info.tel }}</text>
				</view>
				<view class="call-btn" @click="makeCall(goodsInfo.merch_info.tel)">
					<image src="/static/o2o/dianhua@2x.png" />
				</view>
			</view>
		</view>

		<!-- 团购详情 -->
		<view class="group-detail" v-if="goodsInfo.goods_list">
			<view class="section-title">团购详情</view>
			<view class="goods-table">
				<view class="table-header">
					<text class="col-name">套餐内容</text>
					<text class="col-num">份额</text>
					<text class="col-price">价格</text>
				</view>
				<view class="table-row" v-for="item in goodsInfo.goods_list" :key="item.id">
					<text class="col-name">{{ item.goods_name }}</text>
					<text class="col-num">{{ item.num }}份</text>
					<text class="col-price">¥{{ item.price }}</text>
				</view>
			</view>
			<view class="total-info">
				<text class="total-label">总计</text>
				<text class="total-num">{{ goodsInfo.goods_list_count.count }}份</text>
				<text class="total-price">￥{{ goodsInfo.goods_list_count.price }}</text>
			</view>
			<view class="group-price">
				<text class="group-label">团购价</text>
				<text class="group-money">￥{{ goodsInfo.price }}</text>
			</view>
			<view class="service-desc">
				<view class="desc-title">服务说明</view>
				<text class="desc-content">{{ goodsInfo.explain }}</text>
			</view>
			<view class="detail-link" @click="viewDetail">
				<text>查看图文详情</text>
				<image src="/static/o2o/twxq@2x.png" />
			</view>
		</view>

		<!-- 购买须知 -->
		<view class="purchase-notice" v-if="goodsInfo.notice">
			<view class="section-title">购买须知</view>
			<view class="notice-item" v-for="item in goodsInfo.notice" :key="item.name">
				<view class="notice-label">{{ item.name }}</view>
				<text class="notice-content">{{ item.value }}</text>
			</view>
		</view>

		<!-- 其他团购 -->
		<view class="other-groups" v-if="otherGroups.length">
			<view class="section-title">本店其他团购</view>
			<view class="group-list">
				<view class="group-item" v-for="item in otherGroups" :key="item.group_id" @click="switchGroup(item.group_id)">
					<view class="item-info">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-sold">已售{{ item.sold_num }}</view>
						<view class="item-price">¥{{ item.price }}</view>
						<view class="item-profit">分润¥{{ item.rebate_price }}</view>
					</view>
					<view class="item-buy-btn" @click.stop="buyOther(item.group_id)">购买</view>
				</view>
			</view>
		</view>

		<!-- 用户评价 -->
		<view class="review-section" v-if="goodsInfo.eval_list && goodsInfo.eval_list.length">
			<view class="section-title">用户评价</view>
			<view class="review-score">
				<view class="score-info">
					<text class="score-num">{{ goodsInfo.eval_score }}</text>
					<text class="score-label">综合评分</text>
				</view>
			</view>
			<view class="review-list">
				<view class="review-item" v-for="item in goodsInfo.eval_list" :key="item.id">
					<view class="review-header">
						<view class="user-info">
							<image :src="item.header_img || '/static/icon-mrtx@3x.png'" class="user-avatar" />
							<text class="username">{{ item.username }}</text>
						</view>
						<view class="review-stars">
							<text class="star" v-for="n in 5" :key="n" :class="{ active: n <= item.score }">★</text>
						</view>
						<text class="review-time">{{ item.created }}</text>
					</view>
					<view class="review-content">
						<text class="store-name">{{ item.address }}</text>
						<text class="review-text">{{ item.content }}</text>
						<view class="review-images" v-if="item.img_list && item.img_list.length">
							<image v-for="img in item.img_list" :key="img" :src="img" @click="previewImage(img, item.img_list)" />
						</view>
					</view>
				</view>
			</view>
			<view class="view-all-btn" @click="viewAllReviews">查看全部评价</view>
		</view>

		<!-- 咨询客服 -->
		<view class="customer-service" @click="showPhoneModal">
			<image src="/static/o2o/zxkf@2x.png" />
			<text>咨询客服</text>
		</view>

		<!-- 电话弹窗 -->
		<view class="phone-modal" v-if="showPhone" @click="hidePhoneModal">
			<view class="phone-content" @click.stop>
				<view class="phone-list">
					<view class="phone-item" v-for="item in phoneList" :key="item.phone" @click="makeCall(item.phone)">
						{{ item.service }}：{{ item.phone }}
					</view>
				</view>
				<view class="cancel-btn" @click="hidePhoneModal">取消</view>
			</view>
		</view>

		<!-- 分享弹窗 -->
		<view class="share-modal" v-if="showShare" @click="hideShareModal">
			<view class="share-content" @click.stop>
				<view class="share-title">第三方分享</view>
				<view class="share-buttons">
					<button class="share-btn" @click="shareToWechat">
						<image src="/static/fx01.png" />
						<text>微信</text>
					</button>
					<button class="share-btn" @click="shareToMoments">
						<image src="/static/fx02.png" />
						<text>朋友圈</text>
					</button>
					<button class="share-btn" @click="shareToQQ">
						<image src="/static/fx03.png" />
						<text>QQ好友</text>
					</button>
					<button class="share-btn" @click="shareToQzone">
						<image src="/static/fx04.png" />
						<text>QQ空间</text>
					</button>
					<button class="share-btn" @click="shareToWeibo">
						<image src="/static/fx05.png" />
						<text>新浪微博</text>
					</button>
					<button class="share-btn" @click="copyLink">
						<image src="/static/fx06.png" />
						<text>复制链接</text>
					</button>
				</view>
				<view class="share-cancel" @click="hideShareModal">取消</view>
			</view>
		</view>

		<!-- 底部关注栏 -->
		<view class="footer-bar">
			<view class="footer-content">
				<view class="logo-info">
					<text class="app-name">优享优品</text>
					<text class="app-desc">全民"分润"电商平台</text>
				</view>
				<view class="follow-btn" @click="followWechat">关注</view>
			</view>
		</view>
	</view>
</template>

<script>
import { o2oApi, systemApi } from '@/api/index.js'

export default {
	data() {
		return {
			groupId: '',
			storeId: '',
			inviteCode: '',
			goodsInfo: {},
			profitInfo: null,
			otherGroups: [],
			phoneList: [],
			bannerList: [],
			showHeader: false,
			showPhone: false,
			showShare: false
		}
	},
	
	onLoad(options) {
		console.log('页面参数:', options)
		
		// 解析参数
		if (options.group) {
			const arr = options.group.split('_')
			this.groupId = arr[0]
			this.storeId = arr[1]
			this.inviteCode = arr[2] || ''
		} else {
			this.groupId = options.group_id || ''
			this.storeId = options.store_id || ''
			this.inviteCode = options.invite_code || ''
		}
		
		if (this.groupId && this.storeId) {
			this.loadGoodsDetail()
			this.loadServicePhone()
		}
	},
	
	onPageScroll(e) {
		// 控制头部显示隐藏
		const scrollTop = e.scrollTop
		this.showHeader = scrollTop > 200
	},
	
	methods: {
		// 加载商品详情
		async loadGoodsDetail() {
			try {
				uni.showLoading({ title: '加载中...' })
				
				const res = await o2oApi.getGroupDetail({
					group_id: this.groupId,
					merch_id: this.storeId
				})
				
				if (res.r === 0) {
					this.goodsInfo = res.data.info
					this.profitInfo = res.data.consume_rebate
					this.otherGroups = res.data.goods_select || []
					
					// 处理轮播图
					this.bannerList = this.goodsInfo.img_list || []
					
					console.log('商品详情:', this.goodsInfo)
				} else {
					uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
				}
			} catch (error) {
				console.error('加载商品详情失败:', error)
				uni.showToast({ title: '网络错误', icon: 'none' })
			} finally {
				uni.hideLoading()
			}
		},
		
		// 加载客服电话
		async loadServicePhone() {
			try {
				const res = await systemApi.getServicePhone()
				if (res.r === 0) {
					this.phoneList = res.data.list || []
				}
			} catch (error) {
				console.error('加载客服电话失败:', error)
			}
		},
		
		// 立即购买
		buyNow() {
			if (!this.groupId || !this.storeId) {
				uni.showToast({ title: '参数错误', icon: 'none' })
				return
			}
			
			uni.navigateTo({
				url: `/pages/o2o/submit-order?group_id=${this.groupId}&store_id=${this.storeId}`
			})
		},
		
		// 购买其他团购
		buyOther(groupId) {
			uni.navigateTo({
				url: `/pages/o2o/submit-order?group_id=${groupId}&store_id=${this.storeId}`
			})
		},
		
		// 切换团购商品
		switchGroup(groupId) {
			this.groupId = groupId
			this.loadGoodsDetail()
		},
		
		// 查看图文详情
		viewDetail() {
			uni.navigateTo({
				url: `/pages/o2o/tuwenxq?group_id=${this.groupId}&store_id=${this.storeId}`
			})
		},
		
		// 查看全部评价
		viewAllReviews() {
			uni.navigateTo({
				url: `/pages/o2o/pingjia?group_id=${this.groupId}&store_id=${this.storeId}`
			})
		},
		
		// 拨打电话
		makeCall(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		
		// 预览图片
		previewImage(current, urls) {
			uni.previewImage({
				current,
				urls
			})
		},
		
		// 显示电话弹窗
		showPhoneModal() {
			this.showPhone = true
		},
		
		// 隐藏电话弹窗
		hidePhoneModal() {
			this.showPhone = false
		},
		
		// 显示分享弹窗
		showShareModal() {
			this.showShare = true
		},
		
		// 隐藏分享弹窗
		hideShareModal() {
			this.showShare = false
		},
		
		// 分享到微信
		shareToWechat() {
			uni.showToast({ title: '请去右上角点击分享~', icon: 'none' })
		},
		
		// 分享到朋友圈
		shareToMoments() {
			uni.showToast({ title: '请去右上角点击分享~', icon: 'none' })
		},
		
		// 分享到QQ
		shareToQQ() {
			uni.showToast({ title: '请去右上角点击分享~', icon: 'none' })
		},
		
		// 分享到QQ空间
		shareToQzone() {
			uni.showToast({ title: '请去右上角点击分享~', icon: 'none' })
		},
		
		// 分享到微博
		shareToWeibo() {
			const title = this.goodsInfo.title || ''
			const url = window.location.href
			const pic = this.goodsInfo.main_img || ''
			const shareUrl = `http://v.t.sina.com.cn/share/share.php?title=${title}&url=${url}&content=utf-8&sourceUrl=${url}&pic=${pic}`
			
			// #ifdef H5
			window.open(shareUrl)
			// #endif
			
			// #ifndef H5
			uni.showToast({ title: '暂不支持', icon: 'none' })
			// #endif
		},
		
		// 复制链接
		copyLink() {
			// #ifdef H5
			const url = window.location.href
			navigator.clipboard.writeText(url).then(() => {
				uni.showToast({ title: '复制成功', icon: 'success' })
			}).catch(() => {
				uni.showToast({ title: '复制失败', icon: 'none' })
			})
			// #endif
			
			// #ifndef H5
			uni.setClipboardData({
				data: `${this.goodsInfo.title || ''} - 优享优品`,
				success: () => {
					uni.showToast({ title: '复制成功', icon: 'success' })
				}
			})
			// #endif
		},
		
		// 关注微信公众号
		followWechat() {
			// 跳转到微信公众号
			const url = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxNDM1Mjg5OQ==#wechat_redirect'
			
			// #ifdef H5
			window.location.href = url
			// #endif
			
			// #ifndef H5
			uni.showToast({ title: '请在微信中打开', icon: 'none' })
			// #endif
		},
		
		// 返回
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #eee;
	min-height: 100vh;
}

/* 头部导航 */
.header-bag {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background: #ff1e00;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	
	&.show {
		opacity: 1;
		visibility: visible;
	}
	
	.back-btn {
		width: 35rpx;
		height: 35rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		
		text {
			color: #fff;
			font-size: 34rpx;
			font-weight: 700;
		}
	}
	
	.share-btn {
		width: 35rpx;
		height: 35rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 轮播图区域 */
.banner-section {
	position: relative;
	width: 100%;
	height: 462rpx;
	
	.back-btn-float, .share-btn-float {
		position: absolute;
		top: 30rpx;
		z-index: 11;
		width: 50rpx;
		height: 50rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.back-btn-float {
		left: 30rpx;
	}
	
	.share-btn-float {
		right: 30rpx;
	}
	
	.swiper {
		width: 100%;
		height: 100%;
		
		swiper-item {
			width: 100%;
			height: 100%;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

/* 商家信息 */
.merchant-info {
	background: #fff;
	padding: 30rpx;
	
	.merchant-title {
		font-size: 34rpx;
		color: #212121;
		font-weight: 700;
		margin-bottom: 10rpx;
	}
	
	.goods-intro {
		font-size: 28rpx;
		color: #6e6e6e;
		line-height: 1.5;
	}
}

/* 价格区域 */
.price-section {
	background: #fff;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10rpx;
	
	.price-left {
		flex: 1;
	}
	
	.current-price {
		font-size: 42rpx;
		color: #ff1e00;
		font-weight: 700;
		margin-bottom: 10rpx;
		
		.price-num {
			font-size: 68rpx;
		}
		
		.market-price {
			font-size: 26rpx;
			color: #9c9c9c;
			text-decoration: line-through;
			margin-left: 20rpx;
		}
	}
	
	.hand-price {
		font-size: 26rpx;
		color: #ff1e00;
	}
	
	.buy-btn {
		width: 190rpx;
		height: 72rpx;
		background: #ff1e00;
		border-radius: 6rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* 会员分润信息 */
.member-profit {
	background: #fff;
	padding: 30rpx;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin-top: 10rpx;
	
	text {
		display: block;
		font-size: 24rpx;
		color: #6e6e6e;
		margin-bottom: 10rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* 售出信息 */
.sold-info {
	background: #fff;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	
	.info-item, .sold-count {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #ff9600;
		
		image {
			width: 22rpx;
			height: 22rpx;
			margin-right: 14rpx;
		}
	}
	
	.sold-count {
		color: #6e6e6e;
	}
}

/* 适用商户 */
.merchant-address {
	background: #fff;
	margin: 10rpx 0;
	
	.section-title {
		font-size: 30rpx;
		color: #212121;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.address-info {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		
		.address-text {
			flex: 1;
			padding-left: 70rpx;
			background: url('/static/o2o/dizhi@2x.png') no-repeat 30rpx center;
			background-size: 24rpx 30rpx;
			border-right: 1px solid #ddd;
			padding-right: 30rpx;
			
			.address {
				display: block;
				font-size: 30rpx;
				color: #212121;
				margin-bottom: 5rpx;
			}
			
			.phone {
				display: block;
				font-size: 26rpx;
				color: #6e6e6e;
			}
		}
		
		.call-btn {
			width: 140rpx;
			text-align: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}

/* 团购详情 */
.group-detail {
	background: #fff;
	margin-bottom: 10rpx;
	
	.section-title {
		font-size: 30rpx;
		color: #212121;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.goods-table {
		padding: 0 30rpx 20rpx;
		
		.table-header, .table-row {
			display: flex;
			padding: 20rpx 0 10rpx;
			
			.col-name {
				width: 350rpx;
				padding-right: 50rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.col-num {
				width: 120rpx;
			}
			
			.col-price {
				width: 215rpx;
				text-align: right;
			}
		}
		
		.table-header {
			margin: 0;
			
			text {
				font-size: 28rpx;
				color: #212121;
			}
		}
		
		.table-row {
			margin-bottom: 10rpx;
			
			text {
				font-size: 26rpx;
				color: #6e6e6e;
			}
		}
	}
	
	.total-info, .group-price {
		display: flex;
		padding: 0 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #ddd;
		
		text {
			font-size: 28rpx;
			color: #212121;
		}
		
		.total-label, .group-label {
			width: 350rpx;
		}
		
		.total-num {
			width: 120rpx;
		}
		
		.total-price, .group-money {
			width: 215rpx;
			text-align: right;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	
	.group-price {
		height: 100rpx;
		line-height: 100rpx;
		
		.group-label {
			width: 470rpx;
		}
		
		.group-money {
			width: 215rpx;
			font-size: 36rpx;
			color: #ff1e00;
		}
	}
	
	.service-desc {
		padding: 0 30rpx 20rpx;
		border-bottom: 1px solid #ddd;
		
		.desc-title {
			font-size: 28rpx;
			color: #212121;
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 700;
		}
		
		.desc-content {
			font-size: 26rpx;
			color: #6e6e6e;
			line-height: 1.5;
		}
	}
	
	.detail-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		color: #ff9600;
		
		image {
			width: 18rpx;
			height: 12rpx;
		}
	}
}

/* 购买须知 */
.purchase-notice {
	background: #fff;
	margin-bottom: 10rpx;
	
	.section-title {
		font-size: 30rpx;
		color: #212121;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #ddd;
		text-align: center;
		font-weight: 700;
	}
	
	.notice-item {
		padding: 0 30rpx 20rpx;
		
		.notice-label {
			font-size: 26rpx;
			color: #444;
			font-weight: 700;
			margin-bottom: 10rpx;
		}
		
		.notice-content {
			font-size: 26rpx;
			color: #777;
			line-height: 1.5;
		}
	}
}

/* 其他团购 */
.other-groups {
	background: #fff;
	margin-bottom: 10rpx;
	
	.section-title {
		text-align: center;
		font-size: 30rpx;
		color: #444;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.group-list {
		.group-item {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			height: 116rpx;
			border-bottom: 1px solid #ddd;
			
			.item-info {
				flex: 1;
				
				.item-title {
					font-size: 28rpx;
					color: #212121;
					width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 10rpx;
				}
				
				.item-sold {
					font-size: 24rpx;
					color: #6e6e6e;
					float: left;
				}
				
				.item-price {
					font-size: 26rpx;
					color: #ff1e00;
					width: 160rpx;
					float: left;
				}
				
				.item-profit {
					font-size: 26rpx;
					color: #6e6e6e;
					float: left;
					
					text {
						color: #ff9600;
					}
				}
			}
			
			.item-buy-btn {
				width: 136rpx;
				height: 60rpx;
				background: #ff1e00;
				border: 1px solid #ff1e00;
				border-radius: 6rpx;
				color: #fff;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

/* 用户评价 */
.review-section {
	background: #fff;
	margin-bottom: 10rpx;
	
	.section-title {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		background: #fff;
		border-bottom: 1px solid #ddd;
		color: #212121;
		font-weight: 700;
	}
	
	.review-score {
		padding: 15rpx 0;
		
		.score-info {
			display: flex;
			align-items: center;
			padding-left: 180rpx;
			
			.score-num {
				font-size: 56rpx;
				color: #ff1e00;
				padding-right: 20rpx;
			}
			
			.score-label {
				font-size: 28rpx;
				color: #444;
				padding-top: 25rpx;
			}
		}
	}
	
	.review-list {
		.review-item {
			border-top: 1px solid #ddd;
			padding-top: 40rpx;
			
			.review-header {
				position: relative;
				margin-left: 30rpx;
				
				.user-info {
					display: flex;
					align-items: center;
					
					.user-avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					
					.username {
						font-size: 32rpx;
						color: #212121;
						width: 200rpx;
					}
				}
				
				.review-stars {
					position: absolute;
					left: 120rpx;
					top: 90rpx;
					
					.star {
						font-size: 24rpx;
						color: #ddd;
						
						&.active {
							color: #ff1e00;
						}
					}
				}
				
				.review-time {
					position: absolute;
					right: 30rpx;
					top: 0;
					font-size: 26rpx;
					color: #9c9c9c;
					line-height: 80rpx;
				}
			}
			
			.review-content {
				margin-left: 120rpx;
				margin-top: 20rpx;
				padding-right: 20rpx;
				
				.store-name {
					display: block;
					font-size: 26rpx;
					color: #6e6e6e;
					margin-bottom: 10rpx;
				}
				
				.review-text {
					font-size: 28rpx;
					color: #212121;
					line-height: 1.5;
					margin-bottom: 20rpx;
				}
				
				.review-images {
					display: flex;
					flex-wrap: wrap;
					
					image {
						width: 182rpx;
						height: 184rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
	
	.view-all-btn {
		height: 150rpx;
		border-top: 1px solid #ddd;
		padding: 35rpx 0;
		text-align: center;
		
		view {
			padding: 15rpx 20rpx;
			border: 1px solid #ccc;
			border-radius: 6rpx;
			font-size: 30rpx;
			width: 300rpx;
			margin: 0 auto;
		}
	}
}

/* 咨询客服 */
.customer-service {
	background: #fff;
	font-size: 30rpx;
	margin: 10rpx 0;
	color: #212121;
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	image {
		width: 35rpx;
		height: 37rpx;
		margin-right: 10rpx;
	}
}

/* 电话弹窗 */
.phone-modal {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	
	.phone-content {
		width: 100%;
		background: #f7f7f7;
		
		.phone-list {
			.phone-item {
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #ddd;
				font-size: 32rpx;
				color: #ff1e00;
				background: #fff;
			}
		}
		
		.cancel-btn {
			width: 100%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-top: 1px solid #ddd;
			margin-top: 16rpx;
			color: #6e6e6e;
			font-size: 32rpx;
			background: #fff;
		}
	}
}

/* 分享弹窗 */
.share-modal {
	position: fixed;
	bottom: 0;
	z-index: 666;
	height: 700rpx;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	
	.share-content {
		background: #fff;
		font-size: 30rpx;
		padding-top: 20rpx;
		width: 100%;
		height: 520rpx;
		
		.share-title {
			text-align: center;
			font-weight: 400;
			background: url('/static/share-Line@2x.png') no-repeat center;
			height: 80rpx;
			line-height: 80rpx;
		}
		
		.share-buttons {
			padding: 20rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			
			.share-btn {
				width: 25%;
				padding: 10rpx 0 40rpx;
				background: #fff;
				border: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 10rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
		
		.share-cancel {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 80rpx;
			background: rgba(0, 0, 0, 0.1);
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
		}
	}
}

/* 底部关注栏 */
.footer-bar {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 140rpx;
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	padding: 30rpx 50rpx;
	z-index: 1222222222;
	opacity: 0.95;
	
	.footer-content {
		height: 100%;
		background: url('/static/logo@2x.png') no-repeat;
		background-size: 73rpx 73rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.logo-info {
			padding-left: 90rpx;
			
			.app-name {
				display: block;
				font-size: 28rpx;
				color: #616161;
			}
			
			.app-desc {
				display: block;
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.follow-btn {
			border: 1px solid #13d151;
			padding: 11rpx 38rpx;
			font-size: 26rpx;
			color: #13d151;
			border-radius: 4rpx;
		}
	}
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
	.container {
		font-size: 28rpx;
	}
}
</style>